<template>
  <div class="searchResult">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
    <!-- 下拉菜单 -->
      <van-dropdown-menu>
        <van-dropdown-item v-model="sort" :options="option1" />
        <van-dropdown-item @change="sortGoods" v-model="order" :options="option2" />
        <van-dropdown-item v-model="value3" :options="option3" />
      </van-dropdown-menu>
      <!-- 商品列表 -->
      <van-grid :column-num="2">
        <van-grid-item
          v-for="item in list"
          :key="item.id"
          @click="toOtherPage(item.id)"
        >
          <div class="goods">
            <van-image width="80%" height="80%" :src="item.list_pic_url" />
            <p style="font-size: 14px; margin-bottom: 10px;">{{ item.name }}</p>
            <p style="font-size: 14px; color: red;">
              ￥{{ item.retail_price }}
            </p>
          </div>
        </van-grid-item>
      </van-grid>
    </van-list>
  </div>
</template>

<script>
import { getGoodsListData } from '@/api/han/search.js'
export default {
  name: 'searchResult',
  data() {
    return {
      list: [], // 搜索结果
      loading: false, // 是否在加载
      finished: false, //是否结束,
      page: 1, // 页码
      size: 10, // 每页数量
      sort:0,
      order:'desc',
      value3:0,
      option1: [
        { text: '综合', value: 0 },
      ],
      option2: [
        { text: '价格升序', value: 'asc' },
        { text: '价格降序', value: 'desc' },
      ],
      option3: [
        { text: '全部', value: 0 },
        { text: '洗护', value: 1 },
      ],
    }
  },
  props: {
    searchText: {
      type: String,
    },
  },
  methods: {
    // 1.发送请求，加载数据
    async onLoad() {
      let {data} = await getGoodsListData({
        page: this.page,
        size: this.size,
        keyword: this.searchText,
        order:this.order
      })
      console.log(data)
      this.list.push(...data.data.data)
      // 2.关闭loading
      this.loading = false
      // 3.判断是否结束
      if (data.data.data.length < 10) {
        // 3.1 结束了 finished为true
        this.finished = true
      } else {
        // 3.2 未结束则页码变化
        this.page++
      }
    },
    toOtherPage(val) {
      console.log(val)
    },
    sortGoods(){
      this.list = []
      this.onLoad()
    }
  },
}
</script>

<style scoped>
.goods {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  align-content: center !important;
}
</style>
